(function(){
    $.ajax({
        url:'http://chst.vip:1234/api/getcategorytitle',
    }).then(res=>{

        let html=res.result.reduce((value,item)=>{
            return value+`
            <div class='panel' titleid=${item.titleId}>
                <div class="panel-head">
                    <span class="fl">${item.title}</span>
                    <i class="fr">▼</i>
                </div>
                <ul class="row"></ul>
            </div>`
        },"")

        $('.panel-group').html(html)

        $('.panel').map(function(){
            $.ajax({
                url:`http://chst.vip:1234/api/getcategory?titleid=${$(this).attr('titleid')}`,
            }).then(res=>{
                let html=res.result.reduce((value,item)=>{
                    return value+`
                      <a href="../pages/comparison.html?title=${item.category}&categoryid=${item.categoryId}">
                      <li>${item.category}</li>
                      </a>
                    `
                },"")
                
                $(this).find('.row').html(html)                
                $(this).find('.row').slideUp(13)

                $(this).find('.panel-head').click(function(){
                    $(this).parent().find('.row').slideToggle(200).parent().siblings().find('.row').slideUp(200)
                })
            })
        })

    })
})()